<script setup>
    import PlayBtn from '../../globalCompoents/PlayBtn.vue'
    import { computedPlayTime } from '../../../tools/play.js';
    import { inject, ref, computed} from 'vue';
    const emitter = inject('emitter');

    let showCancase = ref(false);
    const playList = (key) => {
        showCancase.value = key;
    }
    document.addEventListener('click', () => playList(false));

    const length = computed(() => playListData.value.length);
    const playListData = ref([])
    // let playIndex = ref();
    emitter.on('addData', ({id, songName, singerList, duration}) => {
        let obj = {id, songName, singerList, duration};
        if(length.value) {
            let key = true;
            playListData.value.forEach(value => {
                if(value.id == id) {
                    key = false;
                }
            })
            if(key) {
                playListData.value.push(obj);
            }
        } else {
            playListData.value.push(obj);
        }
    })

    // clearPlayList
    const clearPlayList = () =>  playListData.value = [];

    // deleteSingle
    const deleteSingle = index => playListData.value.splice(index, 1);


    // 当前歌曲播放完毕之后自动播放下一首    
    // 防抖函数
    function debounce(callback, delay) {
        let timeId = null;
        return function() {
            clearTimeout(timeId);
            timeId = setTimeout(() => {
                callback();
            }, delay)
        }
    }

    let index = 0;    
    emitter.on('getNextSongId', debounce(() => {
        if(playListData.value.length) {
            if(index >= playListData.value.length) { index = 0 }
            emitter.emit('play', playListData.value[index].id)
            setPlayListLiStyle(index);
            index ++;
        }
    }, 300))
    emitter.on('getUpperSongId', debounce(() => {
        if(playListData.value.length) {
            index --;
            if(index < 0) { index = playListData.value.length-1 }
            emitter.emit('play', playListData.value[index].id)
            setPlayListLiStyle(index);
        }
    }, 300))

    const setPlayListLiStyle = (index) => {
        let li = document.querySelectorAll('.playListLi');
        li.forEach(item => {
            item.style.backgroundColor = 'rgb(34, 34, 34)'
        })
        li[index].style.backgroundColor = 'rgb(141, 11, 11)';
    }
</script>

<template>
    <section class="playlist" @click.stop="playList(!showCancase)">
        <div class="logo">
            <img src="../../../assets/img/playList.png">
        </div>
        <div class="count">{{ length }}</div>
    </section>
    <div class="canvas" v-show="showCancase">
        <article>
            <header>
                <section>播放列表({{1}})</section>
                <section>
                    <span><img src="../../../assets/img/collectionpng.png">收藏全部</span>
                    <span>|</span>
                    <span @click="clearPlayList"><img src="../../../assets/img/delete.png">清除</span>
                </section>
            </header>
            <ul  @click.stop @scroll.stop>
                <li v-for="(item, index) of playListData" :key="item.id" class="playListLi">
                    <div><PlayBtn :id="item.id"></PlayBtn></div>
                    <div>
                        <span>{{item.songName}}</span> 
                        <img @click="deleteSingle(index)" src="../../../assets/img/delete.png" alt="">
                    </div>
                    <div>
                        <template v-for="(value, index) of item.singerList">
                            <span v-if="index != 0"> / </span>
                            <span>{{value.name}}</span>
                        </template>
                    </div>
                    <div>{{computedPlayTime( item.duration )}}</div>
                </li>
            </ul>
        </article>
        <aside>
            <header></header>  
            <main></main>
        </aside>
    </div>
</template>

<style lang='less' scoped>
    .playlist{
        margin-left: 20px;
        cursor: pointer;
        width: 40px;
        height: 17px;
        box-sizing: border-box;
        right: 0px;
        background-color: rgb(71, 71, 71);
        font-size: 12px;
        text-align: center;
        color: #ccc;
        opacity: 0.8;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        &:hover{
            .logo{
                box-shadow: 0 0 5px 1px white inset;
                border-radius: 50%;
            }
        }

        .logo{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 30px;
            width: 27px;
            height: 27px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 75%;
            }
        }
    }

    .canvas{
        z-index: -1;
        position: absolute;
        bottom: 50px;
        right: 0px;
        width: 980px;
        height: 300px;
        background-color: rgba(10, 10, 10, 0.9);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-bottom: 3px solid black;
        article,
        aside{
            display: flex;
            flex-direction: column;
            header{
                height: 40px;
                border-bottom: 1px solid rgb(59, 59, 59);
                line-height: 40px;
                flex-shrink: 0;
                padding: 0 15px;
                color: white;
                display: flex;
            }
        }
        article{
            width: 60%;
            height: 100%;
            float: left;
            ::-webkit-scrollbar{
                width: 7px;
                height: 50px;
            }
            ::-webkit-scrollbar-thumb{
                background: linear-gradient(#bbcfd6 0%, #C88CDE 100%);
                border-radius: 8px;
            }
            header{
                section{
                    &:last-child{
                        margin-left: auto;
                        position: relative;
                        span{
                            font-size: 13px;
                            color: #ccc;
                            img{
                                position: absolute;
                                top: 50%;
                                transform: translateY(-45%);
                            }
                            &:first-child{
                                cursor: pointer;
                                &:hover{
                                    color: white;
                                }
                                img{
                                    left: -18px;
                                    width: 15px;
                                }
                            }
                            &:nth-child(2) {
                                color: #555;
                                padding: 0 20px;
                            }
                            &:last-child{
                                cursor: pointer;
                                &:hover{
                                    color: white;
                                }
                                img{
                                    right: 25px;
                                    width: 18px;
                                }
                            }
                        }
                    }     
                }
            }
            ul{
                flex-grow: 1;
                overflow-y: auto;
                color: white;
                li{
                    width: 100%;
                    height: 25px;
                    line-height: 25px;
                    display: flex;
                    background-color: rgb(34, 34, 34);
                    cursor: pointer;
                    &:hover{
                        background-color: #444!important;
                        div{
                            &:nth-child(2) {
                                img{
                                    display: block;
                                }         
                            }
                        }
                    }
                    div{
                        font-size: 12px;
                        &:first-child{
                            width: 10%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                        }
                        &:nth-child(2) {
                            flex-grow: 1;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            position: relative;
                            img{
                                display: none;
                                cursor: pointer;
                                position: absolute;
                                top: 50%;
                                right: 5px;
                                transform: translateY(-50%);
                                width: 20px;
                                height: 20px;
                            }
                        }
                        &:nth-child(3) {
                            width: 30%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        &:last-child{
                            width: 15%;
                            text-align: center;
                        }
                    }
                }
            }
        }
        aside{
            box-sizing: border-box;
            float: left;
            width: 40%; 
            height: 100%;
            border-left: 3px solid black;
            ::-webkit-scrollbar{
                width: 7px;
                height: 50px;
            }
            ::-webkit-scrollbar-thumb{
                background: linear-gradient(#bbcfd6 0%, #C88CDE 100%);
                border-radius: 8px;
            }
            main{
                flex-grow: 1;
                overflow-y: auto;
                color: white;
            }
        }
    }
    
</style>